<script>
import { toNickArr } from "../../util";
export default {
  name: "itemCheckBox",
  props: {
    value: [Number, String, Array, Object, undefined, null],
    config: Object,
    change: Function,
  },
  data() {
    return {
      configSelf: {},
      options: null,
      valueSelf: undefined
    };
  },
  watch: {
    config: {
      handler(val) {
        // debugger;
        if (val.options) {
          this.init();
        }
      },
      deep: true,
      immediate: true
    },
    value: {
      handler(val) {
        this.valueSelf = val || [];
      },
      immediate: true,
    }
  },
  methods: {
    init() {
      // 指定value字段和label字段
      this.options = [
        ...toNickArr(
          this.config?.options,
          this.config?.optionLabelNick,
          this.config?.optionValueNick
        ),
      ];
       // 处理radio key-value
       const arr = this.options.map(e => {
        return {
            ...e,
            label: e.value,
            names: e.label,
        }
      });
      this.options = [...arr];
      this.configSelf = { ...this.config };
      delete this.configSelf.options;
      // 处理placeholder
      this.configSelf.placeholder = `请选择${this.config?.label}`;
    },
    setValueSelf(value) {
      this.change(value);
    },
  },
  mounted() {},
  render() {
    return (
      <el-checkbox-group
        vModel={this.valueSelf}
        onInput={this.setValueSelf}
        props={{ ...this.configSelf }}
      >
        {this.options?.map((e) => (
          <el-checkbox
            key={e.value}
            props={{...e}}
          >{e.names}</el-checkbox>
        ))}
      </el-checkbox-group>
    );
  },
};
</script>
